import './global.less'
import { breadCrumb } from '@/common/components'
export default {
  name: 'GlobalHeader',
  props: ['collapsed', 'menuData'],
  computed: {
    getHeadWidth () {
      return this.collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)'
    },
    getUserName () {
      return this.$store.getters.userInfo.name
    }
  },
  methods: {
    toggleCollapse () {
      this.$emit('toggleCollapse')
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    // 退出登录
    handleLogout () {

    }
  },
  render () {
    // 参数配置
    const { getHeadWidth, collapsed, toggleCollapse, getUserName } = this
    // 面包屑
    const { handleLogout } = this
    this.$scopedSlots.itemRender = ({ route, params, routes }) => {
      return (
        <div class="itemRender" >
          {(routes.indexOf(route) === routes.length - 1)
            ? <span>{route.breadcrumbName} </span>
            : <a href={`#${route.path}`} > {route.breadcrumbName}</a>}
        </div>
      )
    }
    return (
      <a-layout-header
        class={['light', 'fixed-header', 'global-header']}
        style={{ width: getHeadWidth }}
      >
        <div class={['global-header-wide', 'side']}>
          <div class="header-left">
            <span
              class="iconfont iconshouqi trigger"
              type={collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={toggleCollapse}
            ></span>
            <div class="breadCrumb">
              <breadCrumb {...{ scopedSlots: { ...this.$scopedSlots } }}>
                <span slot="separator">/</span>
              </breadCrumb>
            </div>
          </div>
          <div class="header-right">
            <span class="user-name">你好，{getUserName}</span>
            <span
              class="logout"
              onClick={handleLogout}
            >
              <span class="iconfont icontuichu"></span>退出登录
            </span>
          </div>
        </div>
      </a-layout-header>
    )
  }
}
